<!DOCTYPE html>
<html>
<head>
    <title>PlayCanvas User Interface</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="icon" type="image/png" href="../playcanvas-favicon.png" />
    <script src="../../build/output/playcanvas.js"></script>
    <style>
        body { 
            margin: 0;
            overflow-y: hidden;
        }
    </style>
</head>

<body>
    <canvas id="application-canvas"></canvas>

    <script>
        // draw some axes
        var drawAxes = function (pos, scale) {
            var color = new pc.Color(1,0,0);

            var axis = new pc.Vec3();
            var end = new pc.Vec3().copy(pos).add(axis.set(scale,0,0));

            app.renderLine(pos, end, color);

            color.set(0, 1, 0);
            end.sub(axis.set(scale,0,0)).add(axis.set(0,scale,0));
            app.renderLine(pos, end, color);

            color.set(0, 0, 1);
            end.sub(axis.set(0,scale,0)).add(axis.set(0,0,scale));
            app.renderLine(pos, end, color);
        }
    </script>


    <script>
        var canvas = document.getElementById('application-canvas');
        var app = new pc.Application(canvas, {
            mouse: new pc.Mouse(document.body),
            touch: new pc.TouchDevice(document.body),
            elementInput: new pc.ElementInput(canvas)
        });
        app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
        app.setCanvasResolution(pc.RESOLUTION_AUTO);

        window.addEventListener("resize", function () {
            app.resizeCanvas(canvas.width, canvas.height);
        });

        // use device pixel ratio
        app.graphicsDevice.maxPixelRatio = window.devicePixelRatio;

        app.start();

        // create camera
        var c = new pc.Entity();
        c.addComponent('camera', {
            clearColor: new pc.Color(44/255, 62/255, 80/255),
            farClip: 10000
        });
        c.translate(1,1,1);
        c.lookAt(0,0,0);
        app.root.addChild(c);

        // Load Assets
        var assetsToLoad = [
            new pc.Asset("red_button_atlas.json", "textureatlas", {url: "../assets/button/red_button_atlas.json"}),
            new pc.Asset("Button Default", "sprite", {url: "../assets/button/red_button_default.json"}),
            new pc.Asset("Button Pressed", "sprite", {url: "../assets/button/red_button_pressed.json"}),
            new pc.Asset("Button Hover", "sprite", {url: "../assets/button/red_button_hover.json"}),
            new pc.Asset("Button Disabled", "sprite", {url: "../assets/button/red_button_disabled.json"}),
            new pc.Asset('arial.json', "font", {url: "../assets/fonts/arial.json"}),
            new pc.Asset("heart.png", "texture", {url: "../assets/textures/heart.png"}),
            new pc.Asset("grey_panel.png", "texture", {url: "../assets/textures/blue-panel.png"})
        ]

        var count =0;
        app.assets.on('load', function () {
            count++;
            if (count === assetsToLoad.length) {
                onLoadComplete();
            }
        });

        for (var i = 0; i < assetsToLoad.length; i++) {
            app.assets.add(assetsToLoad[i]);
            app.assets.load(assetsToLoad[i]);
        }

        var assets = {
            atlas: assetsToLoad[0],
            buttonDefault: assetsToLoad[1],
            buttonPressed: assetsToLoad[2],
            buttonHover: assetsToLoad[3],
            buttonDisabled: assetsToLoad[4],
            font: assetsToLoad[5],
            heart: assetsToLoad[6],
            panel: assetsToLoad[7]
        }

        // global ui elements
        var menu, panel;
        var hud, score, lives;
        var fps;

        // create a button
        // an image element, with button script and selector attached
        // and a text element label
        var createButton = function (text, x, y, active) {
            var button = new pc.Entity('Button');
            button.addComponent('element', {
                type: 'image',
                anchor: [0.5,1,0.5,1],
                pivot: [0.5, 1],
                width: 256,
                height: 64,
                spriteAsset: assets.buttonDefault
            });
            button.element.useInput = true;

            button.addComponent('button', {
                active: active,
                transitionMode: pc.BUTTON_TRANSITION_MODE_SPRITE_CHANGE,
                hoverSpriteAsset: assets.buttonHover,
                pressedSpriteAsset: assets.buttonPressed,
                inactiveSpriteAsset: assets.buttonDisabled,
                imageEntity: button
            });

            button.setLocalPosition(x, y, 0);

            button.button.on('pressedstart', function () {
                label.translateLocal(0, -4, 0);
            });

            button.button.on('pressedend', function () {
                label.translateLocal(0, 4, 0);
            });

            var label = new pc.Entity();
            label.name = "label";
            label.addComponent('element', {
                anchor: new pc.Vec4(0.5,0.5,0.5,0.5),
                pivot: new pc.Vec2(0.5,0.5),
                width: 256,
                height: 64,
                type: "text",
                text: text,
                fontAsset: assets.font,
                color: active ? new pc.Color(1,1,1) : new pc.Color(0.2,0.2,0.2),
                opacity: 0.5
            });
            label.setLocalPosition(0, 4, 0)
            button.addChild(label);

            return button;
        };

        // enable the menu, disable the hud
        var showMenu = function () {
            menu.enabled = true;
            hud.enabled = false;
            fps.enabled = false;
        };

        // enable and reset the hud, disable the menu
        var showGame = function () {
            menu.enabled = false;
            hud.enabled = true;
            fps.enabled = true;
            for (var i = 0; i < lives.length; i++) {
                lives[i].enabled = true;
                points = 0;
            }
        }

        // toggle annoy mode
        function toggleSpin() {
            spin = !spin;
        }

        // create the menu screen, panel and buttons
        function createMenu() {
            menu = new pc.Entity();
            menu.addComponent("screen", {resolution: new pc.Vec2(640,480), screenSpace: true});
            menu.screen.scaleMode = "blend";
            menu.screen.referenceResolution = new pc.Vec2(1280,720);
            app.root.addChild(menu);

            panel = new pc.Entity();
            panel.name = "panel";
            panel.addComponent('element', {
                anchor: new pc.Vec4(0.5, 0.5, 0.5, 0.5),
                pivot: new pc.Vec2(0.5, 0.5),
                width: 300,
                height: 300,
                type: "image",
                textureAsset: assets.panel
            });

            button = createButton("START", 0, -22, true);
            button.button.on('click', function () {
                showGame();
            });
            panel.addChild(button);

            button = createButton("ANNOY", 0, -108, true);
            button.button.on('click', function () {
                toggleSpin();
            });
            panel.addChild(button);

            button = createButton("DISABLED", 0, -192, false);

            panel.addChild(button);
            menu.addChild(panel);
            menu.enabled = false;
        };

        // create the score text and the lives display
        function createHud() {
            hud = new pc.Entity();
            hud.name = "hud";
            hud.addComponent("screen", {resolution: new pc.Vec2(640,480), screenSpace: true});
            hud.screen.scaleMode = "blend";
            hud.screen.referenceResolution = new pc.Vec2(1280,720);

            score = new pc.Entity();
            score.addComponent("element", {
                anchor: [1,1,1,1],
                pivot: [1,1],
                type: "text",
                text: "0",
                fontSize: 64,
                fontAsset: assets.font,
                color: new pc.Color(1,1,1)
            });
            hud.addChild(score);
            score.translateLocal(-84, -10, 0);

            lives = [];
            for (var i = 0; i < 3; i++) {
                lives[i] = new pc.Entity("Life "+i);
                lives[i].addComponent("element", {
                    anchor: [1,1,1,1],
                    pivot: [1,1],
                    width: 64,
                    height: 64,
                    type: "image",
                    textureAsset: assets.heart
                });
                hud.addChild(lives[i]);
                lives[i].translateLocal(-10, -64*i-10, 0);
            }
            app.root.addChild(hud);
            hud.enabled = false;
        }

        // create some world space text that displays the current FPS
        function createFps() {
            fps = new pc.Entity();
            fps.addComponent("element", {
                anchors: [0,0,0,0],
                pivot: [0.5,0],
                type: "text",
                text: "FPS",
                fontSize: 16,
                fontAsset: assets.font,
                color: new pc.Color(1,1,1),
                opacity: 1
            });
            fps.setLocalScale(1/64,1/64,1.64);
            app.root.addChild(fps);
        };

        // called when all assets are loaded
        function onLoadComplete() {

            // create the entities
            createMenu();
            createHud();
            createFps();

            // show main menu
            showMenu();
        }

        var spin = false; // annoy mode
        var a = 0; // used for animating
        var points = 0; // current score
        var averageFps = 60; // current FPS

        // update every frame
        app.on("update", function (dt) {
            // increment angle counter
            a += dt;

            // draw origin
            drawAxes(pc.Vec3.ZERO, 1)

            // if hud is active
            if (hud && hud.enabled) {
                // increment score
                points += 10;
                score.element.text = points;

                // "lose" lives
                if (points > 1000) {
                    lives[2].enabled = false;
                }
                if (points > 2000) {
                    lives[1].enabled = false;
                }
                if (points > 3000) {
                    lives[0].enabled = false;
                    showMenu(); // return to main menu
                }

                // update world space FPS counter
                averageFps = pc.math.lerp(averageFps, (1/dt), 0.01); // smooth fps
                fps.element.text = "Hello World!\n" + averageFps.toPrecision(3) + "fps";
                fps.setLocalPosition(
                    0.5*Math.sin(2*a),
                    0.125*Math.sin(3*a),
                    0.125*Math.sin(5*a)
                );
            } else {
                // if annoy mode is active rotate the panel
                if (spin) {
                    panel.rotateLocal(0, 0, 90*dt);
                }
            }
        });
    </script>
</body>
</html>
